<template>
  <div class="message-content">
    <template v-if="thinkingParts.isInThinkingState || thinkingParts.hasCompleteThinking">
      <CollapsibleThought>
        <div class="markdown-content" v-html="renderMarkdown(thinkingParts.displayedThinkingContent)"></div>
      </CollapsibleThought>
      <div v-if="thinkingParts.remainingContent" class="remaining-content markdown-content" v-html="renderMarkdown(thinkingParts.remainingContent)"></div>
    </template>
    <template v-else>
      <div class="markdown-content" v-html="renderMarkdown(message)"></div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import markdownit from 'markdown-it'
import CollapsibleThought from './CollapsibleThought.vue'

const props = defineProps<{
  message: string
}>()

const md = markdownit({
  html: true,
  linkify: true,
  typographer: true
})

const renderMarkdown = (content: string | null) => {
  if (!content) return ''
  return md.render(content)
}

interface ThinkingParts {
  isInThinkingState: boolean
  hasCompleteThinking: boolean
  displayedThinkingContent: string
  remainingContent: string | null
}

// 处理消息，提取思考部分和其他部分
const thinkingParts = computed<ThinkingParts>(() => {
  const content = props.message

  // 查找开始标记的位置
  const startIndex = content.indexOf('<think>')
  // 查找结束标记的位置
  const endIndex = content.indexOf('</think>')

  // 如果找到了开始标记但还没找到结束标记，则处于思考状态中
  if (startIndex !== -1 && endIndex === -1) {
    const thinkingContent = content.substring(startIndex + 8) // +8 是为了跳过 '<think1>' 标签本身
    return {
      isInThinkingState: true,
      hasCompleteThinking: false,
      displayedThinkingContent: thinkingContent,
      remainingContent: null
    }
  }

  // 如果同时找到了开始和结束标记，则完整提取思考内容
  if (startIndex !== -1 && endIndex !== -1 && endIndex > startIndex) {
    const thinkingContent = content.substring(startIndex + 8, endIndex)
    const remainingContent = content.substring(endIndex + 9) // +9 是为了跳过 '</think1>' 标签本身
    return {
      isInThinkingState: false,
      hasCompleteThinking: true, // 标记有完整的思考内容
      displayedThinkingContent: thinkingContent,
      remainingContent: remainingContent.trim() || null
    }
  }

  // 如果没有找到任何标记，正常显示消息
  return {
    isInThinkingState: false,
    hasCompleteThinking: false,
    displayedThinkingContent: '',
    remainingContent: null
  }
})
</script>

<style scoped>
.remaining-content {
  margin-top: 10px;
}

.message-content {
  width: 100%;
}

.markdown-content {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Markdown样式 */
.markdown-content :deep(p) {
  margin: 0 0 10px 0;
}

.markdown-content :deep(h1),
.markdown-content :deep(h2),
.markdown-content :deep(h3) {
  margin: 15px 0 10px 0;
  font-weight: bold;
}

.markdown-content :deep(h1) {
  font-size: 1.5em;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.markdown-content :deep(h2) {
  font-size: 1.3em;
}

.markdown-content :deep(h3) {
  font-size: 1.1em;
}

.markdown-content :deep(ul),
.markdown-content :deep(ol) {
  margin: 10px 0;
  padding-left: 20px;
}

.markdown-content :deep(li) {
  margin: 5px 0;
}

.markdown-content :deep(pre) {
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 10px 0;
}

.markdown-content :deep(code) {
  background-color: #f4f4f4;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.markdown-content :deep(blockquote) {
  border-left: 4px solid #ddd;
  margin: 10px 0;
  padding-left: 15px;
  color: #666;
}

.markdown-content :deep(table) {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
}

.markdown-content :deep(th),
.markdown-content :deep(td) {
  border: 1px solid #ddd;
  padding: 6px 10px;
  text-align: left;
}

.markdown-content :deep(th) {
  background-color: #f5f5f5;
  font-weight: bold;
}

.markdown-content :deep(img) {
  max-width: 100%;
}
</style>
